<template>
	<view class="app">
		<mescroll-body
			ref="mescrollRef"
			@init="mescrollInit" 
			:top="5" 
			@down="downCallback" 
			:up="upOption" 
			@up="loadList" 
		>
			<view class="item " v-for="item in list" :key="item.id" @click="navToDetai(item)">
				<view class="icon-txt">
					<view class="icon-image" v-if="item.img">
						<image class="icon" :src="'https://maxh-1305457127.cos.ap-guangzhou.myqcloud.com/'+item.img" mode="aspectFill"></image>
					</view>
					<view class="icon-image" v-else>
						<image class="icon" :src="'/static/icon/default-avatar.png'" mode="aspectFill"></image>
					</view>
					<view class="tit">
						<view class="title">
							<span class="teacherName">姓名：</span>
							{{ item.username }}
						</view>
						<view class="title">
							<span class="teacherName">学历：</span>
							{{ item.degree }}
						</view>
						<view class="title">
							<span class="teacherName">职称：</span>
							{{ item.title }}
						</view>
					</view>
				</view>
			</view>
			<view v-if="list.length===0" class="image-bg ">
				<view class="center">
					<image src="../../static/icon/default-avatar.png" class="img-png"></image>
				</view>
				<view class="img-text">空空如也</view>
			</view>
		</mescroll-body>
		
		<mix-loading v-if="isLoading" :mask="true"></mix-loading>
		<!-- #ifdef MP-WEIXIN -->
		<mix-load-more :status="loadingType"></mix-load-more>
		<!-- #endif -->
	</view>
</template>

<script>
	import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue"
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import {getTeacherList} from '@/common/js/api';
	export default {
		components: {
			MescrollBody
		},
		mixins: [MescrollMixin],
		data() {
			return {
				upOption:{
					page: {
					 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					 	size: 5 // 每页数据的数量
					},
				},
				modalText: '', //确认对话框内容
				list: [] ,//订单列表
				listLoading:false,
			}
		},
		onLoad(options) {
			this.isLoading = true;

		},
		onShow(){
			if(this.loaded){
				this.refreshList(false);
			}
		},
		methods: {
			//加载产品列表
			async loadList(e){
				console.log(e);
				this.mescroll.removeEmpty();
				this.loadType = e.num === 1 ? 'refresh' : 'add';
				if(this.loadType==='add'){
					this.listNum = this.listNum + 5; 
				}else{
					this.listNum = 5;
					this.listLoading = false
				}
				if( this.loadType==='refresh' || this.listLoading===false){
					const res = await getTeacherList()
					if(res.code===200){
						if(res.data.length>this.listNum){
							this.list = res.data.slice(0,this.listNum)
							console.log(this.list);
						}else{
							this.list = res.data
							this.listLoading = true
							this.loadingType = 2
						}
					}
				}
				this.isLoading=false
				 setTimeout(()=>{
				 	 this.mescroll.endSuccess(); //结束加载状态
				 }, 1000)
				
			},
			
			mescrollInit(mescroll){
				this.mescroll = mescroll;
				setTimeout(()=>{
					this.refreshList();
				}, 10)
			},
			//刷新列表
			refreshList(){
				this.mescroll.resetUpScroll(false)
				this.isLoading = true;
			},
			navToDetai(item){
				this.navTo('/pages/faculty/detail?id=' + item.id)
			},
		}
	}
</script>

<style>
	page{
		background-color: #f7f7f7;
	}
</style>
<style scoped lang="scss">
	.app{
		
	}
	.item{
		width: 700rpx;
		padding-bottom: 24rpx;
		margin-top: 20rpx;
		margin-left: 30rpx;
		background-color: #fff;
		border-radius: 12rpx;
	}
	.b-b:after{
		left: 4rpx;
		right: 4rpx;
		border-color: #e5e5e5;
	}
	.i-header{
		height: 80rpx;
		padding: 0 24rpx;
		margin-bottom: 24rpx;
		
		.time{
			font-size: 26rpx;
			color: #999;
		}
		.state{
			font-size: 30rpx;
			color: $base-color;
			
			&.gray{
				color: #999;
			}
		}
	}
	.scroll-view{
		width: 100%;
		height: 150rpx;
		
		.goods-list{
			display: flex;
			background-color: #0081FF;
			&::before, &::after{
				content: '';
				width: 20rpx;
				height: 130rpx;
				flex-shrink: 0;
			}
			&::after{
				width: 10rpx;
			}
			.image-wrapper{
				// flex-shrink: 0;
				width: 130rpx;
				height: 130rpx;
				margin-right: 16rpx;
				border-radius: 4rpx;
				// overflow: hidden;
				margin-top: 30rpx;
				
				color: #07C160;
			}
			image{
				width: 90%;
				height: 90%;
			}
		}
	}
	.goods-wrap{
		padding: 0 20rpx;
	}
	.hot-wrap{
		padding-top: 20rpx;
		background: linear-gradient(to bottom, #fff 10rpx, #f7f7f7);
		opacity: 0;
		transition: opacity .2s;
		
		&.show{
			opacity: 1;
		}
		.floor-header{
			padding-bottom: 30rpx;
		}
		/deep/ .list-item{
			box-shadow: 4rpx 0 10rpx rgba(0,0,0,.06);
		}
	}
	.cate-image{
		width: calc(100% - 40rpx);
		height: 200rpx;
		margin: 0 20rpx;
		border-radius: 8rpx;
	}
	.wrap{
		display: flex;
		flex-wrap: wrap;
		padding: 0 20rpx 20rpx;
	}
	.item{

	}
	.cate-text{
		width: calc(100% - 40rpx);
		margin: 0 20rpx;
		border-radius: 8rpx;
	}
	.icon-txt{
		width: calc(100% - 20rpx);
		height:180rpx;
		margin: 10rpx;
		padding: 10rpx 20rpx;
		border-radius: 8rpx;
		// background-color: #07C160;
	}
	.icon{
		width: 170rpx;
		height: 170rpx;
		line-height: 148rpx;
		margin-top: 15rpx;
		margin-right: 40rpx;
		border-radius: 8rpx;
	}
	.icon-image{
		float: left;
		// background-color: #0081FF;
		border-radius: 8rpx;
	}
	.tit{
		margin-top: 35rpx;
	}
	.title{
		font-size: 32rpx;
		color: #000;
	}
	.type{
		font-size: 20rpx;
		color:#969696;
		float: right;
	}
	.maney{
		font-size: 28rpx;
		color:#999999;
	}
	.teacher{
		margin-bottom: 5rpx;
	}
	.teacherName{
		color: #5e5e5e;
		margin-right:15rpx;
		font-size: 30rpx;
	}
	.introduce-wrap{
		padding-bottom: 20rpx;
		
		.introduce {
			font-size: 28rpx;
			color: #606266;
			line-height: 40rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			overflow: hidden;
		}
		&.has-pic .introduce{
			-webkit-line-clamp: 2;
		}
	}
	.image-bg{
	
		text-align: center;
		border-radius: 6rpx;
		.img-text{
			font-size: 16rpx;
			color: #82939C;
		}
	}
	.img-png{
		text-align: center;
		width: 160rpx;
		height: 160rpx;
	}
</style>
